<template>
  <div class="compass-wrapper" ref="container">
    <div class="compass">
      <!-- 中心点 -->
      <div class="center-dot" :style="{ transform: `rotate(${angle}deg)` }">
        <!-- 刻度线 -->
        <div v-for="item in labels" :key="item.angle" class="tick" :style="{ transform: `rotate(${item.angle}deg)` }">
          <span></span>
        </div>

        <!-- 方向标签 -->
        <div v-for="item in labels" :key="item.text" class="text"
          :style="{ transform: `rotate(${item.angle + 180}deg)`, height: 'calc(' + size + 'px' + ')' }">
          <span :class="item.type">
            {{ item.text }}
          </span>
        </div>
      </div>
      <div class="center_box">
        <div>
          <div>
            <img class="img" src="../../../assets/direction.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue'

const props = defineProps({
  angle: { type: Number, default: 0 },
  labels: {
    type: Array,
    default: () => [
      { text: 'N', type: 'direction', angle: 0 },
      { text: '3', type: 'number', angle: 30 },
      { text: '6', type: 'number', angle: 60 },
      { text: 'E', type: 'direction', angle: 90 },
      { text: '12', type: 'number', angle: 120 },
      { text: '15', type: 'number', angle: 150 },
      { text: 'S', type: 'direction', angle: 180 },
      { text: '21', type: 'number', angle: 210 },
      { text: '24', type: 'number', angle: 240 },
      { text: 'W', type: 'direction', angle: 270 },
      { text: '30', type: 'number', angle: 300 },
      { text: '33', type: 'number', angle: 330 }
    ]
  }
})
const container = ref(null)
const size = ref(null)
const updateSize = () => {
  if (container.value) {
    const containerWidth = container.value.offsetWidth
    const containerHeight = container.value.offsetHeight
    // size.value = Math.min(containerWidth, containerHeight)
    size.value = containerHeight / 2
  }
}
const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    const { width: newWidth } = entry.contentRect;
    size.value = newWidth / 2
  }
});

onMounted(() => {
  updateSize()
  if (container.value) {
    resizeObserver.observe(container.value);
  }
})
onBeforeUnmount(() => {
  if (container.value) {
    resizeObserver.unobserve(container.value);
  }
});
// const emit = defineEmits(['update:angle'])
// const angle = ref(props.angle)

// 监听角度变化
// watch(angle, (val) => emit('update:angle', val))
// watch(() => props.angle, (val) => angle.value = val)
</script>

<style scoped lang="scss">
.compass-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  /* 保持1:1比例 */
  max-width: 100%;
  max-height: 100%;
  margin: 1vh;

  .compass {
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #000000;

    .center-dot {
      position: relative;
      width: 0;
      height: 0;
      font-size: 1.5vh;

      .tick {
        position: absolute;
        transform-origin: center top;
        display: flex;
        align-items: flex-end;
        width: 0.1vh;
        height: 4.7vw;
      }

      .tick span {
        display: block;
        width: 0.1vh;
        height: 0.5vh;
        background-color: #343434;
      }

      .tick:nth-child(1) span {
        height: 0.8vh;
        background: #e74c3c;
      }

      .tick:nth-child(3n+1) span {
        height: 0.8vh;
        background: #e74c3c;
      }

      .text {
        position: absolute;
        transform-origin: center top;
        display: flex;
        align-items: flex-end;
        width: 0.01vh;
        height: 3.6vw;
        font-size: 1vw;
        // height: v-bind(size + 'vw');

        span {
          transform: rotate(180deg);
          width: 0.01vh;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 100;
          font-size: 0.6vw;

        }

        .direction {
          font-weight: 400;
          font-size: 0.8vw;
        }
      }
    }

    .center_box {
      position: absolute;

      .img {
        width: 1.6vw;
      }
    }
  }
}

.controls {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.controls input[type="range"] {
  flex-grow: 1;
}
</style>